<template>
    <el-button size="small" type="success" @click="hangAdd()">添加</el-button>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="年龄" prop="age" />
        <el-table-column label="性别" prop="sex" />
        <el-table-column label="班级" prop="class" />
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[4,8,12,16]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" title="添加">
        <el-form :model="form">
            <input type="hidden" v-model="form.id">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="form.age" autocomplete="off" placeholder="请输入年龄" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男        " />
                    <el-radio label="女        " />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="班级" :label-width="formLabelWidth">
                <el-input v-model="form.class" autocomplete="off" placeholder="请输入所在班级" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="Add()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import axios from 'axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus';
import { ElMessageBox } from "element-plus";
import { markRaw } from "vue";
import { Delete } from "@element-plus/icons-vue";
const tableData = ref([]);
const search = ref("");
//分页数据
const currentPage = ref(1); //第几页
const pageSize = ref(2); //行数
const totalCount = ref(0);
const dialogVisible = ref(false)
// 在搜索框输入时触发筛选
const filterTableData = computed(() => {
    return tableData.value.filter(
        (data) =>
            !search.value ||
            (data.name &&
                data.name.toLowerCase().includes(search.value.toLowerCase()))
    );
});
const form = ref({
    id: "",
    name: "",
    age: "",
    sex: "男        ",
    class: "",
})
onMounted(() => {
  axios({
        method: 'get',
        url: 'https://localhost:7164/api/Values/List',
    }).then((res) => {
      totalCount.value = res.data.length
      select();
    });
})
//数据
function select() {
    axios({
        method: 'get',
        url: 'https://localhost:7164/api/Values/List',
        params: {
      page: currentPage.value, //当前页数
      limit: pageSize.value, //每页显示的条数
    },
    }).then((res) => {
        tableData.value = res.data
    });
}
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val
   select();

}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val
  select();
}
//添加页面
function hangAdd() {
    form.value = { id: 0 };
    dialogVisible.value = true;
}
//编辑页面
function handleEdit(index, row) {
  console.log(row)
    dialogVisible.value = true
    form.value=row

}
//添加编辑
function Add() {
  axios({
    url: "https://localhost:7164/api/Values",
    method: form.value.id === 0 ? "post" : "put",
    data: form.value,
    headers:{
       'Conten-Type':'application/json'
     }
  }).then((result) => {
    if (result.status == 200) {
      ElMessage({
        message: "操作成功",
        type: "success",
      });
      dialogVisible.value = false;
      select();
    } else {
      ElMessage({
        message: "操作失败",
        type: "waring",
      });
    }
  });
}
//删除方法
const handleDelete = (index, row) => {
  ElMessageBox.confirm("删一个试试~?", "Warning", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    icon: markRaw(Delete),
  })
    .then(() => {
      axios({
        method: "delete",
        url: `https://localhost:7164/api/Values/${row.id}` ,
      }).then((response) => {
        if (response.status == 200) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          select();
        } else {
          ElMessage({
            message: "删除失败",
            type: "waring",
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
</script>
